<template>
	<view class="content">
		<!-- #ifdef APP || APP-PLUS || APP-NVUE -->
		<view class="content-userName">
			<view>联系人: </view>
			<u--input class="m-l-20" placeholder="联系人" v-model="userName" maxlength="20" border="none"></u--input>
		</view>
		<view class="content-rate">
			<view>联系电话: </view>
			<u--input class="m-l-20" placeholder="联系电话" v-model="userTele" maxlength="11" border="none"></u--input>
		</view>
		<!-- #endif -->
		<view class="content-rate">
			<view>评分: </view>
			<u-rate class="m-l-20" :count="count" v-model="star" size="30"></u-rate>
		</view>
		
		<u--textarea class="myTextarea" v-model="content" placeholder="请输入内容" count maxlength="150" ></u--textarea>
		
		<u-button class="myBtn" shape="circle" type="warning" @click="save" text="提交反馈"></u-button>
	</view>
</template>

<script>
	import {feedback} from '@/config/api.js'
	export default {
		data() {
			return {
				count: 5,
				star: 0,
				content: '',
				userName: '',
				userTele: ''
			}
		},
		methods: {
			save(){
				//#ifdef APP || APP-PLUS || APP-NVUE
				if(this.userTele){
					let flag = uni.$u.test.mobile(this.userTele);
					console.log("联系电话校验  ==> ",flag);
					if(!flag){
						uni.$u.toast("请评分或者是填写反馈内容")
						return;
					}
				}
				//#endif
				if(this.star == 0 && this.content.length <= 0){
					uni.$u.toast("请评分或者是填写反馈内容")
					return;
				}
				let data = {
					star: this.star,
					content: this.content,
					userName: this.userName,
					userTele: this.userTele
				}
				feedback(data).then((res) =>{
					if(res.code == 200){
						uni.$u.toast("提交成功，感谢您的反馈");
						uni.navigateBack();
					}
					else{
						uni.$u.toast("提交失败")
					}
				})
			}
		}
	}
</script>

<style scoped>
	.content{
		padding: 20px;
	}
	
	.myTextarea{
		margin-top: 20px;
	}
	
	.content-userName{
		display: flex;
		align-items: center;
	}
	
	.m-l-20{
		margin-left: 20px;
	}
	
	.content-rate{
		display: flex;
		align-items: center;
		margin-top: 20px;
	}
	
	.myBtn{
		margin-top: 30px;
	}
</style>
